<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>长轮询（Long polling）</title>
	</head>
	<body>
		<script>
			// 长轮循是与服务器保持持久连接的最简单的方式，它不使用任何特定协议，例如 WebSocket 或者 Server Sent Event。
			// 服务器架构必须能够处理许多挂起的连接。只是请确保你的服务器架构在同时有很多连接的情况下能够正常工作。
		</script>

		<script>
			// 【长轮询】

			// 流程为：
			// 1. 客户端向服务器发送请求。
			// 2. 服务器在有消息之前不会关闭连接。
			// 3. 当消息出现时，服务器将对其请求作出响应。
			// 4. 浏览器立即发出一个新的请求。

			// 实例代码:
			async function subscribe() {
				let response = await fetch('/subscribe')

				if (response.status == 502) {
					// 状态 502 是连接超时错误，连接挂起时间过长时可能会发生，远程服务器或代理会关闭它，让我们重新连接。
					await subscribe()
				} else if (response.status != 200) {
					// 一个错误，让我们显示它。
					alert('Error: ' + response.statusText)
					// 一秒后重新连接
					await new Promise((resolve) => setTimeout(resolve, 1000))
					await subscribe()
				} else {
					// 获取并显示消息
					let message = await response.text()
					alert(message)
					// 再次调用，获取下一条消息
					await subscribe()
				}
			}
		</script>
	</body>
</html>
